// cSpell:ignore swiper
<template>
  <!-- Slider main container -->
  <div ref="swiper" class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <slot/>
    </div>
    <div ref="pagination" class="swiper-pagination"/>

    <div ref="prev" class="swiper-button-prev"/>
    <div ref="next" class="swiper-button-next"/>
  </div>
</template>

<script>
import { Swiper, Navigation, Pagination, Autoplay, Keyboard } from 'swiper';

Swiper.use([Navigation, Pagination, Autoplay, Keyboard]);

export default {
  name: 'Swiper',
  props: {
    initialSlide: {
      type: [Number],
      default: 0
    },
    direction: {
      type: [String],
      default: 'horizontal'
    },
    speed: {
      type: [Number],
      default: 300
    },
    autoHeight: {
      type: [Boolean],
      default: true
    },
    autoplay: {
      type: [Boolean, Object],
      default: true
    },
    nested: {
      type: [Boolean],
      default: false
    },
    effect: {
      type: [String],
      default: 'slide'
    },
    watchOverflow: {
      type: [Boolean],
      default: false
    },
    spaceBetween: {
      type: [Number, String],
      default: 0
    },
    slidesPerView: {
      type: [Number, String],
      default: 'auto'
    },
    slidesPerColumn: {
      type: [Number],
      default: 1
    },
    slidesPerColumnFill: {
      type: [String],
      default: 'column'
    },
    slidesPerGroup: {
      type: [Number],
      default: 1
    },
    centeredSlides: {
      type: [Boolean],
      default: false
    },
    centeredSlidesBounds: {
      type: [Boolean],
      default: false
    },
    slidesOffsetBefore: {
      type: [Number],
      default: 0
    },
    slidesOffsetAfter: {
      type: [Number],
      default: 0
    },
    centerInsufficientSlides: {
      type: [Boolean],
      default: false
    },
    allowTouchMove: {
      type: [Boolean],
      default: true
    },
    threshold: {
      type: [Number],
      default: 0
    },
    allowSlidePrev: {
      type: [Boolean],
      default: true
    },
    allowSlideNext: {
      type: [Boolean],
      default: true
    },
    preventClicks: {
      type: [Boolean],
      default: false
    },
    preventClicksPropagation: {
      type: [Boolean],
      default: false
    },
    slideToClickedSlide: {
      type: [Boolean],
      default: true
    },
    watchSlidesProgress: {
      type: [Boolean],
      default: false
    },
    watchSlidesVisibility: {
      type: [Boolean],
      default: true
    },
    preloadImages: {
      type: [Boolean],
      default: true
    },
    updateOnImagesReady: {
      type: [Boolean],
      default: true
    },
    loop: {
      type: [Boolean],
      default: false
    }
  },

  beforeDestroy() {
    if (this.$swiper) {
      this.$swiper.destroy();
    }
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      console.log(this.$props);
      const swiperOptions = {
        ...this.$props,
        observer: {
          type: [Boolean],
          default: true
        },
        observeParents: {
          type: [Boolean],
          default: true
        },
        observeSlideChildren: {
          type: [Boolean],
          default: true
        },
        pagination: {
          el: this.$refs.pagination,
          type: 'bullets',
          clickable: true
        },
        navigation: {
          nextEl: this.$refs.next,
          prevEl: this.$refs.prev
        },
        on: {
          init: swiper => {
            swiper.update();
            swiper.updateAutoHeight();
          },
          imagesReady: () => {
            this.$swiper.update();
            this.$swiper.updateAutoHeight();
          },
          observerUpdate: () => {
            this.$swiper.update();
            // eslint-disable-next-line no-unused-vars
            const currentSlide = this.$swiper.slides;
            this.$swiper.updateAutoHeight();
          }
        }
      };
      const swiper = new Swiper(this.$refs.swiper, swiperOptions);
      // eslint-disable-next-line no-unused-vars
      const updateAutoHeight = swiper.updateAutoHeight;
      this.$swiper = swiper;
      this.$emit('ready', swiper);
    }
  }
};
</script>

<style lang="scss">
@import 'swiper/swiper-bundle.min.css';
</style>
